require('./Amap.less');
import React from 'react';
import Reflux from 'reflux';
import ReactMixin from 'react-mixin';
import Actions from './Actions'
import Store from './Store';
import { Map,Marker } from 'react-amap';
import { LoadMore ,Button, Popup,CellsTip,Radio ,Form ,FormCell ,Cells,  Cell,  CellsTitle,  CellHeader,  CellBody,  CellFooter ,InfiniteLoader ,
  Panel,  PanelHeader,  PanelBody,  PanelFooter,PreviewFooter,PreviewButton,
  SearchBar,
  MediaBox,
  MediaBoxHeader,
  MediaBoxBody,
  MediaBoxTitle,
  MediaBoxDescription,} from  'react-weui/build/packages'
import 'weui';
import 'react-weui/build/packages/react-weui.css';
import Geolocation from './../geolocation'
import PlaceSearch from './../placesearch'

class AMap extends React.Component {


  constructor(props) {
    super(props);

    console.log(props);
    this.loadMore = this.loadMore.bind(this);
    this.hidePopup = this.hidePopup.bind(this);
    this.searchChange = this.searchChange.bind(this);
    this.seachSubmit = this.seachSubmit.bind(this);
    this.seachCancel = this.seachCancel.bind(this);
    this.scrollEnd = this.scrollEnd.bind(this);
    this.scroll = this.scroll.bind(this);
    this.ok = this.ok.bind(this);
  }

  componentWillMount() {

  }

  componentDidMount() {
    Actions.init();
    Actions.setinfs(this.refs.infs);

    //this.refs.infs.scrollTo(0,100);
    //1082
    //this.refs.infs.scrollTop = 1082
    // window.document.getElementById('infs').scrollTop = 0;

  }

  scroll(e) {
    //console.log(window.document.getElementById('infs').scrollTop);
  }

  scrollEnd(e) {

  }

  searchChange(text) {
    Actions.searchChange(text);
  }

  seachSubmit() {
    Actions.seachSubmit();
  }

  seachCancel() {
    Actions.seachCancel();
  }

  hidePopup() {
    Actions.hidePopup();
  }

  loadMore(resolve, finish) {
    Actions.loadMore(resolve, finish);
  }

  setMarker(obj) {
    Actions.setMarker(obj);
    Actions.setlocation(obj)
  }

  getCurrentPosition() {
    Actions.showPopup();
    if (!this.props.position.name) {
      Actions.getCurrentPosition();
    } else {
      Actions.setMarker(this.props.position);
      Actions.setlocation(this.props.position);
    }
  }

  getCurrentPositionComplete(result) {
    Actions.clearPois();
    Actions.setPosition(result);
    Actions.setMyPosition(result);
    Actions.searchNearBy();

  }

  getCurrentPositionError(error) {
    console.log(error);
  }

  ok() {
    this.hidePopup();
    this.props.onSetPosition(this.state.aMap.location);
  }

  shouldComponentUpdate(nextProps = {}, nextState = {}) {
    const thisProps = this.props || {},
      thisState = this.state.aMap || {};

    if (Object.keys(thisProps).length !== Object.keys(nextProps).length ||
      Object.keys(thisState).length !== Object.keys(nextState).length) {
      return true;
    }

    for (const key in nextProps) {
      if (thisProps[key] !== nextProps[key]) {
        console.log(thisProps[key], nextProps[key]);
        return true;
      }
    }

    for (const key in nextState) {
      if (thisState[key] !== nextState[key]) {
        return true;
      }
    }
    return false;
  }

  render() {
    const pevents = {
      created: (obj) => {
        Actions.setPlaceSearch(obj);
      },
    }

    const gevents = {
      created: (obj) => {
        Actions.setGeolocation(obj);
        window.AMap.event.addListener(obj, 'complete', this.getCurrentPositionComplete);//返回定位信息
        window.AMap.event.addListener(obj, 'error', this.getCurrentPositionError);      //返回定位出错信息
      },
    }
    return (
      <div>
        <Popup
          show={this.state.aMap.fullpage_show}
          onRequestClose={this.hidePopup}>
          <div style={{height: '100vh', overflow: 'scroll'}}>

            <SearchBar
              onSubmit={this.seachSubmit}
              onCancel={this.seachCancel}
              onChange={this.searchChange}
              defaultValue={this.state.aMap.keyword}
              placeholder="搜索地点"
              lang={{cancel: '取消'}}
            />

            <div
              style={{display: this.state.aMap.showSearch ? null : 'none',zIndex:'999',position:'absolute',width:'100%',height: '100vh', overflow: 'scroll',backgroundColor:'#fff'}}>
              <Panel style={{display:null, marginTop: 0 }}>
                <PanelHeader>
                  搜索结果:
                </PanelHeader>
                <PanelBody>
                  {
                    this.state.aMap.searchPois.length > 0 ? this.state.aMap.searchPois.map((item, i) => {
                      return (
                        <MediaBox type="small_appmsg">
                          <MediaBoxTitle>
                            {item.name}
                          </MediaBoxTitle>
                          <MediaBoxDescription>{item.pname}{item.cityname}{item.cityname}{item.address}</MediaBoxDescription>
                        </MediaBox>)
                    }) : (<MediaBox>没有搜索到信息!</MediaBox>)
                  }
                </PanelBody>
              </Panel>
            </div>

            <div style={{height:'280px',zIndex:'1',position:'flex'}}>
              <Map amapkey={'5bb1467495c46464737e970b64ea5d68'} dragEnable={true} zoomEnable={true}
                   showBuildingBlock={true} zoom="20" center={this.state.aMap.position}
                   doubleClickZoom={true}>
                <Marker position={this.state.aMap.position}>
                  <div className="markerA"></div>
                </Marker>
                <Geolocation {...this.state.aMap.geolocationProps} events={gevents}/>
                <PlaceSearch {...this.state.aMap.placeSearchOptions} events={pevents}/>
              </Map>
            </div>

            <InfiniteLoader id="infs" ref="infs" height={window.innerHeight-376} onLoadMore={this.loadMore}
                            onScrollEnd={this.scrollEnd} onScroll={this.scroll}
                            loaderLoadingIcon={(<LoadMore loading>加载更多...</LoadMore>)}
                            loaderDefaultIcon={(<LoadMore showLine showDot>没有数据了</LoadMore>)}>
              <CellsTitle>明细列表</CellsTitle>
              <Form radio>
                {
                  this.state.aMap.pois && this.state.aMap.pois.map((item, i) => {
                    return (
                      <FormCell radio onClick={(e)=>{
                          Actions.setPoisMarker(item);
                          Actions.setlocation({
                            name:item.name,
                            lat:item.location.lat,
                            lng:item.location.lng
                          });
                        }}>
                        <CellBody>
                          <MediaBox type="small_appmsg">
                            <MediaBoxTitle>
                              {item.name}
                            </MediaBoxTitle>
                            <MediaBoxDescription>{item.pname}{item.cityname}{item.address}</MediaBoxDescription>
                          </MediaBox>
                        </CellBody>
                        <CellFooter>
                          <Radio value={item.name} checked={this.state.aMap.location.name===item.name}/>
                        </CellFooter>
                      </FormCell>
                    )
                  })
                }
              </Form>
            </InfiniteLoader>
            <PreviewFooter>
              <PreviewButton primary onClick={this.ok}>确定</PreviewButton>
              <PreviewButton onClick={this.hidePopup}>返回</PreviewButton>
            </PreviewFooter>
          </div>
        </Popup>
      </div>
    );
  }
}

ReactMixin.onClass(AMap, Reflux.connect(Store, 'aMap'));

export default AMap ;
